<template>
	<view style="height:100%;min-width: 100%;" :style="{'background':tuoPuStep == 1?'transparent':'#fff'}">
		<!--step0-->
		<view class="padding-30" v-if="tuoPuStep == 0 || tuoPuStep == 2">
			<view class="fs-16 fw-600">{{deviceInfo.luyouqi.name || ''}}</view>
			<view class="fs-13 dark-color margin-top-20">
				设备数量：{{deviceInfo.devNum || ''}}台
				<text class="fs-13 dark-color mr-left-20">网络异常：{{deviceInfo.wangluoError || '0'}}台</text>
				<text class="fs-13 dark-color mr-left-20">电路异常：{{deviceInfo.dianluError || '0'}}台</text>
			</view>
		</view>
		
		<view v-if="tuoPuStep == 0 || tuoPuStep == 2" class="flex-row align-item-center margin-top-50 jus-around">
			<text :class="{'green-color':showIndex == 0}" @click="switchShowIndex(0)">网络拓扑</text>
			<view style="height: 32rpx;width: 1px;" class="green-bg-color"></view>
			<text :class="{'green-color':showIndex == 1}" @click="switchShowIndex(1)">电路拓扑</text>
		</view>
		
		<view v-if="tuoPuStep == 0 || tuoPuStep == 2" class="flex-column align-item-center jus-center" style="margin-top: 160rpx;">
			<image v-if="tuoPuStep == 0" :src="loadingSrc" style="width: 200rpx;height: 200rpx;"></image>
			<template v-if="tuoPuStep == 2 && netImgStatus != 1">
				<image :src="netImgStatus == 0?waitingSrc:failSrc" style="width: 140rpx;height: 140rpx;"></image>
				<text class="margin-top-24" :class="netImgStatus == 0?'green-color':'red-color'">{{netImgStatus == 0?'拓扑图生成中,请稍等片刻':'拓扑图生成失败,请重试'}}</text>
			</template>
		</view>
		
		<!--step1-->
		<template v-if="tuoPuStep == 1">
			<view style="padding: 30rpx 60rpx 0px 30rpx;background-color: #0BB976;">
				<stepView :steps="currentSteps" :step="currentStep"></stepView>
			</view>
			<template v-if="confirmStep == 0">
				<view v-for="(ywzs,yIndex) in deviceInfo.yunweizhushou" :key="yIndex" class="padding-20 bg-white" style="margin: 16rpx;border-radius: 10rpx;">
					<view>
						<view class="flex-row">
							<view class="fs-14 flex-row" style="flex:1">
								{{ywzs.name}}
								<view class="primary-tag-class mr-left-10 jus-center" style="height: 36rpx;font-size: 24rpx;">{{ywzs.leixing}}</view>
							</view>
							<text class="fs-12" :class="ywzs.electrify == '通电'?'green-color':'red-color'">{{ywzs.electrify}}</text>
						</view>
						<view class="fs-12 light-color margin-top-10">{{ywzs.projectName}}</view>
						<view class="flex-row align-item-center jus-between margin-top-10">
							<text class="fs-12">设备状态：<text class="fs-12" :class="ywzs.devStatus == '在线'?'green-color':'red-color'">{{ywzs.devStatus}}</text></text>
							<view class="fs-12 black-color flex-end flex-row align-item-center" style="width:50%">
								<image class="mr-right-10 small-icon" src="@/static/device/xinhao.png"></image>
								<text class="fs-12" :class="ywzs.xinhao=='正常'?'green-color':'red-color'" style="width: 55rpx;">{{ywzs.xinhao || '未知'}}</text>
								<image class="mr-left-10 mr-right-10 small-icon" src="@/static/device/cardll.png"></image>
								<text class="fs-12 text-right" :class="ywzs.iccidStatus=='正常'?'green-color':'red-color'" style="width: 55rpx;">{{ywzs.iccidStatus || '未知'}}</text>
							</view>
						</view>
						<view class="boder-bottom-dashed margin-top-20" v-if="ywzs.errorList && ywzs.errorList.length>0"></view>
						<view class="padding-tb-20 flex-row flex-warp" v-if="ywzs.errorList && ywzs.errorList.length>0">
							<view class="fs-12 text-right" style="width: 130rpx;">当前故障：</view>
							<view class="fs-12 red-color flex-row align-item-center flex-row flex-warp">
								{{ywzs.errorList.join("、")}}
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="confirmStep == 1">
				<pDeviceView :list="deviceList" showType="device" :showTopInfo="false"></pDeviceView>
			</template>
		</template>
		
		
		<view v-if="tuoPuStep == 2 && netImgStatus == 1">
			<topologyNet v-if="showIndex == 0" :detail="detail"></topologyNet>
			<topologyDianLu v-if="showIndex == 1" :detail="detail"></topologyDianLu>
		</view>
		
		
		
		
		
		<view class="heightPlaceholder" v-if="!(tuoPuStep == 2 && netImgStatus != 2)"></view>
		<view class="btn_bottomView" v-if="!(tuoPuStep == 2 && netImgStatus != 2)">
			<view class="submit-green-btn" @click="toNextStep">生成拓扑图</view>
		</view>
		

	</view>
</template>

<script>
	import stepView from '@/pages/box/steps/step.vue'
	import pDeviceView from '@/pages/project/pDeviceView.vue'
	import topologyNet from './components/topologyNet.vue'
	import topologyDianLu from './components/topologyDianLu.vue'
	export default {
		components:{
			stepView,
			pDeviceView,
			topologyNet,
			topologyDianLu
		},
		data() {
			return {
				id: '',
				detail: {
					two:[]
				},
				showItems:[
					{'name':'网络拓扑',flag:'network',url:'api/3_0/getWangluoTuopu_3_0'},
					{'name':'电路拓扑',flag:'dianlu',url:'api/3_0/getDianluTuopu_3_0'}
				],
				showIndex:0,
				tuoPuStep:0,//0  展示按钮  1 信息检查  2 生成结果成功/失败  3 展示结果
				deviceInfo:{},
				deviceList:[],
				currentSteps:['检查电箱状态','检查设备状态','执行拓扑生成'],
				confirmStep:0,
				netImgStatus:0,//0 生成中  1 成功  2 失败
				loadingSrc:'https://operation.76th.cn/uploads/20240903/c9943e2ab3ff8a9e7f21875df8aae53b.png',
				waitingSrc:'https://operation.76th.cn/uploads/20240903/e0465100c8e3dae700dc69d020c09264.png',
				failSrc:'https://operation.76th.cn/uploads/20240903/497b62e0b5764973ce2574f5cdd49224.png'
			}
		},
		
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getConfirmInfo()
			}
			
			
		},
		onReady() {
			
		},
		methods: {
			toNextStep(){
				if(this.tuoPuStep == 0){
					this.tuoPuStep = 1
				}else if(this.tuoPuStep == 1){
					this.confirmStep++
					if(this.confirmStep == 2){
						this.tuoPuStep = 2
						this.netImgStatus = 0
						this.getDetail()
					}
				}else{
					
				}
				
			},
			getConfirmInfo(){
				let data = {
					powerboxId: this.id
				}
				this.$http.postJSONJAVA({
					url: 'api/3_0/getDianluquren_3_0',
					data: data
				}).then(res => {
					if (res.code == 1) {
						this.deviceInfo = res.data || {}
						this.deviceList = [this.deviceInfo.luyouqi]
						uni.setStorageSync('deviceInfo',this.deviceInfo)
					}
				})
			},
			switchShowIndex(index){
				this.showIndex = index
				this.netImgStatus = 0
				this.getDetail()
			},
			getDetail() {
				let data = {
					powerboxId: this.id
				}
				let url = this.showItems[this.showIndex].url
				this.$http.postJSONJAVA({
					url: url,
					data: data
				}).then(res => {
					
					if (res.code == 1) {
						this.netImgStatus = 1
						this.detail = res.data
					}else{
						this.netImgStatus = 2
					}
				})
			},
		}
	}
</script>

<style>
	.two-icon-class {
		position: absolute;
		top: 0;
		left: calc(50% - 55rpx);
		z-index: 20;
	}
	.tp-container{
		overflow-x: scroll;
	}
	.tp-card-container{
		min-width: 150rpx;
	}

	.tp-line-class ,.error-line-class{
		position: absolute;
		left: 50%;
		top: 0px;
		bottom: 0px;
		background-color: #0bb976;
		width: 2px;

	}
	.error-line-class{
		background-color: #FF3300;
	}
	.cover-line-class{
		position: absolute;
		left: 0px;
		width: 50%;
		background-color: white;
		height: 5px;
		top: -2px;
	}
	.cover-line-right-class{
		position: absolute;
		right: 0px;
		width: 50%;
		background-color: white;
		height: 5px;
		top: -2px;
	}
</style>